{% extends "base.html" %}
{% block content %}
<p class="muted">类别：{{ class_names|join(", ") }}</p>

<form method="post">
  <fieldset role="group">
    <label for="device">推理设备</label>
    <select id="device" name="device">
      {% for dev in devices %}
        <option value="{{ dev }}" {% if dev == chosen_device %}selected{% endif %}>{{ dev }}</option>
      {% endfor %}
    </select>
    <button type="submit" name="action" value="noop">切换</button>
  </fieldset>
</form>

{% if not has_weight %}
<article>
  <mark>提示</mark> 未检测到已训练权重：<code>{{ weight_path }}</code>。请先运行训练脚本生成权重文件。
</article>
{% endif %}

<section class="grid">
  <article>
    <h4>上传图片</h4>
    <form method="post" enctype="multipart/form-data">
      <input type="file" name="file" accept=".jpg,.jpeg,.png,.bmp,.webp" />
      <input type="hidden" name="device" value="{{ chosen_device }}" />
      <button type="submit" name="action" value="upload">开始推理</button>
    </form>
  </article>

  <article>
    <h4>选择样例</h4>
    <form method="post">
      <label>类别</label>
      <select name="sample_class" onchange="this.form.submit()">
        {% for c in sample_classes %}
          <option value="{{ c }}" {% if c == selected_class %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>

      <label>图片</label>
      <select name="sample_image">
        {% for p in sample_images %}
          <option value="{{ p }}" {% if p == selected_image %}selected{% endif %}>{{ p.split('/')[-1] }}</option>
        {% endfor %}
      </select>
      <input type="hidden" name="device" value="{{ chosen_device }}" />
      <button type="submit" name="action" value="sample">对样例图片推理</button>
    </form>
  </article>
</section>

{% if message %}
<article role="alert">{{ message }}</article>
{% endif %}

{% if pred_name %}
<article>
  <h4>预测结果</h4>
  <p>预测：<strong>{{ pred_name }}</strong>（置信度 {{ "%.2f"|format(conf * 100) }}%）</p>
  {% if probs %}
    <canvas id="probChart"></canvas>
    <script>
      const labels = {{ class_names | tojson }};
      const data = {{ probs | tojson }};
      const ctx = document.getElementById('probChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: 'Probability',
            data: data,
            backgroundColor: '#4f46e5'
          }]
        },
        options: {
          scales: {
            y: { min: 0, max: 1, ticks: { stepSize: 0.1 } }
          }
        }
      });
    </script>
  {% endif %}
</article>
{% endif %}

<hr/>
<p class="muted">模型权重路径：<code>{{ weight_path }}</code>；数据集：<code>{{ data_dir }}</code></p>
{% endblock %}